<script setup lang="ts">
import { watch, watchEffect } from 'vue'

const {
    a = 'str',
    b = 123
} = defineProps<{
    a?: string,
    b?: number
}>()

defineEmits<{ onChange: [number] }>()

const model = defineModel<number>()



watchEffect(() => {
    console.log("watchEffect", a)

})

watch(() => b, (newB) => {
    console.log("watch", newB)
})


</script>

<template>
    <div class=" flex flex-col gap-2 p-1 border-2 border-amber-200 bg-amber-50">
        <div> {{ a }} - {{ b }}</div>

        <div>
            <a-input placeholder="Please enter something" v-model="model" allow-clear />
        </div>

        <div class=" m-1">
            <a-button type="primary" @click="$emit('onChange', 888)">click</a-button>
        </div>


    </div>

</template>